<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#div1{width: 300px; height: 300px; position: absolute; left: 400px; top: 200px; background-color: red;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');

		oDiv.onmousedown = function (ev){
			var ev = ev || event;

			var disX = ev.clientX;
			var disY = ev.clientY;
			var disW = this.offsetWidth;
			var disL = this.offsetLeft;
			var disH = this.offsetHeight;
			var disT = this.offsetTop;
			var a ='';

			if (disL + disW - disX < 20) {
				a = 'right';
			};

			if (disX - disL < 20) {
				a = 'left';
			};

			if (disH + disT - disY < 20) {
				a = 'bottom';
			};

			if (disY - disT < 20) {
				a = 'top';
			};

			document.onmousemove = function (ev){
				var ev = ev || event;

				switch ( a ){
					case 'left':
						oDiv.style.width = disW - (ev.clientX - disX) + 'px';
						oDiv.style.left  = disL + (ev.clientX - disX) + 'px';
						break;

					case 'top':
						oDiv.style.height = disH - (ev.clientY - disY) + 'px';
						oDiv.style.top    = disT + (ev.clientY - disY) + 'px';
						break;

					case 'right':
						oDiv.style.width  = disW + (ev.clientX - disX) + 'px';
						break;

					case 'bottom':
						oDiv.style.height = disH + (ev.clientY - disY) + 'px';
						break;
				}
			}
			/*	
			//右
			if (disL + disW - disX < 10) {//不要用把前面两个用var提前存起来，因为本身是变化的但是并没有在后面有再去重新赋值
				document.onmousemove = function (ev){
					var ev = ev || event;

					oDiv.style.width = disW - (disX - ev.clientX)+ 'px';		//也等于ev.clientX - disL
				}
			};

			//左
			if (disX - disL < 10 ) {
				//alert(1);
				document.onmousemove = function (ev){
					var ev = ev || event;

					oDiv.style.width = disW + (disX - ev.clientX) + 'px';
					oDiv.style.left =  disL - (disX - ev.clientX) + 'px';   //不要直接等于移动中鼠标的位置，否则刚点击拖动的瞬间，会有10个像素以内的抖动动。会遵循宽度变宽left响应变小
				}
			};

			//下
			if (disH + disT - disY < 10) {
				document.onmousemove  = function (ev){
					var ev = ev || event;

					oDiv.style.height = disH - (disY - ev.clientY)+ 'px';
				}
			};

			//上
			if (disY - disT < 10 ) {
				//alert(1);
				document.onmousemove = function (ev){
					var ev = ev || event;

					oDiv.style.height = disH + (disY - ev.clientY) + 'px';
					oDiv.style.top =  disT - (disY - ev.clientY) + 'px';   //不要直接等于移动中鼠标的位置，否则刚点击拖动的瞬间，会有10个像素以内的抖动动。会遵循宽度变宽left响应变小
				}
			};*/

			document.onmouseup = function (){
				document.onmousemove = document.onmouseup= null;		//自身也清掉比较好 ！！！！！
				oDiv.removeCapture && oDiv.removeCapture();
			}

			oDiv.setCapture && oDiv.setCapture();
			return false;
		}
	}
	</script>
</head>
<body>
	<h1>拖动边缘</h1>
	<div id="div1"></div>
</body>
</html>